<template>
    <div class="cart">
      <h4>全部商品</h4>
      <div class="cart-main">
        <div class="cart-th">
          <div class="cart-th1">全部</div>
          <div class="cart-th2">商品</div>
          <div class="cart-th3">单价（元）</div>
          <div class="cart-th4">数量</div>
          <div class="cart-th5">小计（元）</div>
          <div class="cart-th6">操作</div>
        </div>
        <div class="cart-body">
          <ul class="cart-list" v-for="good in cartList" :key="good.id">
            <li class="cart-list-con1">
              <input
                type="checkbox"
                name="chk_list"
                :checked="good.isChecked === 1"
                @input="singleChecked(good.skuId, good.isChecked === 1 ? 0 : 1)"
              />
            </li>
            <li class="cart-list-con2">
              <img :src="good.imgUrl" />
              <div class="item-msg">
                {{ good.skuName }}
              </div>
            </li>
            <li class="cart-list-con3">
              <div class="item-txt">语音升级款</div>
            </li>
            <li class="cart-list-con4">
              <span class="price">{{ good.skuPrice }}</span>
            </li>
            <li class="cart-list-con5">
              <a
                href="javascript:void(0)"
                class="mins"
                @click="changeNum(good, -1)"
                >-</a
              >
              <input
                autocomplete="off"
                type="text"
                :value="good.skuNum"
                minnum="1"
                class="itxt"
                @change="changeTextNum(good, $event)"
              />
              <a
                href="javascript:void(0)"
                class="plus"
                @click="changeNum(good, 1)"
                >+</a
              >
            </li>
            <li class="cart-list-con6">
              <span class="sum">{{ good.skuPrice * good.skuNum }}</span>
            </li>
            <li class="cart-list-con7">
              <a class="sindelet" @click="deleteSingle(good.skuId)">删除</a>
              <br />
              <a href="#none">移到收藏</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="cart-tool">
        <div class="select-all">
          <input class="chooseAll" type="checkbox" v-model="allChecked" />
          <span>全选</span>
        </div>
        <div class="option">
          <a @click="deleteAll">删除选中的商品</a>
          <a href="#none">移到我的关注</a>
          <a href="#none">清除下柜商品</a>
        </div>
        <div class="money-box">
          <div class="chosed">
            已选择 <span>{{ allNum }}</span
            >件商品
          </div>
          <div class="sumprice">
            <em>总价（不含运费） ：</em>
            <i class="summoney">{{ allPrice }}</i>
          </div>
          <div class="sumbtn">
            <a class="sum-btn" href="###" target="_blank">结算</a>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import {
    reqCartList,
    reqCartSingleChange,
    reqCartAllChange,
    reqCartSingleDelete,
    reqCartAllDelete,
    reqAddOrUpdateCart,
  } from "@/api";
  export default {
    name: "ShopCart",
    data() {
      return {
        cartList: [],
      };
    },
    mounted() {
      this.getCartList();
    },
    methods: {
      //1.获取购物车列表的数据
      async getCartList() {
        const result = await reqCartList();
        // console.log(result);
        this.cartList =
          result[0]?.cartInfoList.map((item) => {
            item.isReq = false;
            return item;
          }) || [];
      },
  
      //2.修改单个的选中状态
      async singleChecked(skuId, isChecked) {
        //发送请求切换
        await reqCartSingleChange(skuId, isChecked);
        //重新发送请求
        this.getCartList();
      },
  
      //3. 删除单个商品
      async deleteSingle(skuId) {
        //发送删除请求
        await reqCartSingleDelete(skuId);
        //重新发送请求
        this.getCartList();
      },
  
      //4. 删除已经选中的所有商品
      async deleteAll() {
        //先得到所有已经选中的商品的skuId组成的数组
        const skuIdList = this.cartList.reduce(
          (p, c) => (c.isChecked === 1 ? [...p, c.skuId] : p),
          []
        );
  
        await reqCartAllDelete(skuIdList);
        //重新发送请求
        this.getCartList();
      },
  
      //5. 点击加减按钮修改商品数量
      async changeNum(good, num) {
        //如果正在发送请求 则直接return不再操作
        if (good.isReq) return;
  
        //一旦经过看门狗,就说明现在没有请求,但是马上开始请求了,我们要设置当前正在发送修改请求
        good.isReq = true;
  
        //判断如果是减少数量的话,则判断临界值
        if (num === -1 && good.skuNum <= 1) return (good.isReq = false);
  
        //发送修改数量请求
        await reqAddOrUpdateCart(good.skuId, num);
  
        //重新发送请求
        await this.getCartList();
  
        // 必须等待最新的数据请求回来,设置当前发送修改数量请求已经结束,并且拿到最新数据,下次判断就能使用最新数据判断了;
        good.isReq = false;
      },
  
      //6. 数量输入框修改数量的事件回调函数
      async changeTextNum(good, e) {
        //先获取用户输入的值 转为数字
        const userInputNum = parseInt(e.target.value);
        e.target.value = userInputNum;
        //先判断当前输入的内容是否是纯数字,如果不是则直接设置为原始值,并return
  
        if (isNaN(userInputNum) || userInputNum < 1) {
          e.target.value = good.skuNum;
          return;
        }
  
        await reqAddOrUpdateCart(good.skuId, userInputNum - good.skuNum);
  
        //重新发送请求
        await this.getCartList();
      },
    },
    computed: {
      //计算商品的总数量
      allNum() {
        return this.cartList.reduce((p, c) => p + c.skuNum, 0);
      },
      //计算商品总价钱
      allPrice() {
        return this.cartList.reduce((p, c) => p + c.skuPrice * c.skuNum, 0);
      },
      //商品的全选状态
      allChecked: {
        get() {
          return this.cartList.every((item) => item.isChecked === 1);
        },
        async set(value) {
          //获取所有商品的skuId组成的数组
          const skuIdList = this.cartList.map((item) => item.skuId);
          await reqCartAllChange(value ? 1 : 0, skuIdList);
  
          //重新发送请求
          this.getCartList();
        },
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  .cart {
    width: 1200px;
    margin: 0 auto;
  
    h4 {
      margin: 9px 0;
      font-size: 14px;
      line-height: 21px;
    }
  
    .cart-main {
      .cart-th {
        background: #f5f5f5;
        border: 1px solid #ddd;
        padding: 10px;
        overflow: hidden;
  
        & > div {
          float: left;
        }
  
        .cart-th1 {
          width: 25%;
  
          input {
            vertical-align: middle;
          }
  
          span {
            vertical-align: middle;
          }
        }
  
        .cart-th2 {
          width: 25%;
        }
  
        .cart-th3,
        .cart-th4,
        .cart-th5,
        .cart-th6 {
          width: 12.5%;
        }
      }
  
      .cart-body {
        margin: 15px 0;
        border: 1px solid #ddd;
  
        .cart-list {
          padding: 10px;
          border-bottom: 1px solid #ddd;
          overflow: hidden;
  
          & > li {
            float: left;
          }
  
          .cart-list-con1 {
            width: 4.1667%;
          }
  
          .cart-list-con2 {
            width: 25%;
  
            img {
              width: 82px;
              height: 82px;
              float: left;
            }
  
            .item-msg {
              float: left;
              width: 150px;
              margin: 0 10px;
              line-height: 18px;
            }
          }
  
          .cart-list-con3 {
            width: 20.8333%;
  
            .item-txt {
              text-align: center;
            }
          }
  
          .cart-list-con4 {
            width: 12.5%;
          }
  
          .cart-list-con5 {
            width: 12.5%;
  
            .mins {
              border: 1px solid #ddd;
              border-right: 0;
              float: left;
              color: #666;
              width: 6px;
              text-align: center;
              padding: 8px;
            }
  
            input {
              border: 1px solid #ddd;
              width: 40px;
              height: 33px;
              float: left;
              text-align: center;
              font-size: 14px;
            }
  
            .plus {
              border: 1px solid #ddd;
              border-left: 0;
              float: left;
              color: #666;
              width: 6px;
              text-align: center;
              padding: 8px;
            }
          }
  
          .cart-list-con6 {
            width: 12.5%;
  
            .sum {
              font-size: 16px;
            }
          }
  
          .cart-list-con7 {
            width: 12.5%;
  
            a {
              color: #666;
            }
          }
        }
      }
    }
  
    .cart-tool {
      overflow: hidden;
      border: 1px solid #ddd;
  
      .select-all {
        padding: 10px;
        overflow: hidden;
        float: left;
  
        span {
          vertical-align: middle;
        }
  
        input {
          vertical-align: middle;
        }
      }
  
      .option {
        padding: 10px;
        overflow: hidden;
        float: left;
  
        a {
          float: left;
          padding: 0 10px;
          color: #666;
        }
      }
  
      .money-box {
        float: right;
  
        .chosed {
          line-height: 26px;
          float: left;
          padding: 0 10px;
        }
  
        .sumprice {
          width: 200px;
          line-height: 22px;
          float: left;
          padding: 0 10px;
  
          .summoney {
            color: #c81623;
            font-size: 16px;
          }
        }
  
        .sumbtn {
          float: right;
  
          a {
            display: block;
            position: relative;
            width: 96px;
            height: 52px;
            line-height: 52px;
            color: #fff;
            text-align: center;
            font-size: 18px;
            font-family: "Microsoft YaHei";
            background: #e1251b;
            overflow: hidden;
          }
        }
      }
    }
  }
  </style>